<template>
  <scroll-view scroll-y class="swiper-scroll">
    <!-- 题干 -->
    <view class="title">
      <!-- 题标顺序不用examIndex是因为其需要计算，在swiper切换完成后才能更新视图 -->
      <!-- 因为此处题标顺序需要预加载前后页题标顺序，故使用父组件索引传值idx -->
      <text class="title-index">{{ idx + 1 }}.</text>
      <view class="title-content">
        <text class="paper-type-tag">
          {{ config.paperTypeDict[paperItem.exam_type] }}
        </text>
        <!-- <rich-text class="rich-text" :nodes="paperItem.exam_name"></rich-text> -->
        <mp-html class="rich-text" :content="paperItem.exam_name" />
      </view>
    </view>
    <!-- 选项 -->
    <view class="options">
      <exam-options :paper-item="paperItem" @change="onSelect"></exam-options>
    </view>
    <!-- 答案 -->
    <view class="anwser" v-if="paperItem.submit">
      <text>
        正确答案
        <text class="anwser-text">
          {{ correctAnwser }}
        </text>
      </text>
      <text>
        你的答案
        <text :class="[paperItem.correct ? 'anwser-correct' : 'anwser-wrong']">
          {{ myAnwser }}
        </text>
      </text>
    </view>
    <!-- 解析 - 背题模式直接显示解析 -->
    <view class="analysis" v-if="paperItem.submit || examType == config.examTypeDict[0]">
      <view class="analysis-title">解析</view>
      <!-- <rich-text :nodes="paperItem.analysis"></rich-text> -->
      <mp-html :content="paperItem.analysis" />
      <view class="feedback">
        <text @click="onFeedback(paperItem)">{{ config.feedbackText }}</text>
      </view>
    </view>
    <view class="control-placeholder"></view>
    <!-- 按钮控制 -->
    <view class="control">
      <view class="control-btn">
        <button size="mini" type="default" :disabled="examIndex == 0" @click="prev">上一题</button>
      </view>
      <view class="control-btn">
        <button
          v-if="examType == config.examTypeDict[1]"
          size="mini"
          type="primary"
          :disabled="paperItem.submit"
          @click="submit"
        >
          提交
        </button>
        <!-- 考试模式最后一题才显示交卷 -->
        <button
          v-else-if="examType == config.examTypeDict[2] && examIndex == total - 1"
          size="mini"
          type="primary"
          :disabled="paperItem.submit"
          @click="complete"
        >
          交卷
        </button>
        <view
          v-else-if="examType == config.examTypeDict[2] && examIndex < total - 1"
          style="width: 100%; font-size: 12px; text-align: center; opacity: 0.4"
        >
          {{ config.toCompleteText }}
        </view>
      </view>
      <view class="control-btn">
        <button size="mini" type="default" :disabled="examIndex == total - 1" @click="next">
          下一题
        </button>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import ExamOptions from './exam-options.vue'
import config from '@/uni_modules/sv-exam-plus/config.js'
import store from '@/uni_modules/sv-exam-plus/store/index.js'

export default {
  components: {
    ExamOptions
  },
  props: {
    // 当前题目
    curItem: {
      type: Object,
      default: () => {}
    },
    // 题标顺序
    idx: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      config, // 兼容写法，需要先声明否则报错
      paperItem: {}
    }
  },
  computed: {
    examData: {
      set(newData) {
        store.commit('updateData', newData)
      },
      get() {
        return store.state.examData
      }
    },
    examType: {
      set(newType) {
        store.commit('updateType', newType)
      },
      get() {
        return store.state.examType
      }
    },
    examIndex: {
      set(newIndex) {
        store.commit('updateIndex', newIndex)
      },
      get() {
        return store.state.examIndex
      }
    },
    total() {
      return store.state.examData?.length || 0
    },
    correctAnwser() {
      return this.paperItem.exam_answer?.sort()?.toString() || '--'
    },
    myAnwser() {
      return this.paperItem.selected?.sort()?.toString() || '--'
    }
  },
  watch: {
    curItem: {
      handler(newData) {
        this.paperItem = newData
      },
      immediate: true
    }
  },
  created() {
    this.init()
    // 监听交卷
    this.onCompleted()
  },
  methods: {
    init() {
      this.paperItem = this.curItem
    },
    prev() {
      const curIndex = this.examIndex <= 0 ? 0 : this.examIndex - 1
      store.commit('updateIndex', curIndex)
    },
    next() {
      const curIndex = this.examIndex >= this.total - 1 ? this.total - 1 : this.examIndex + 1
      store.commit('updateIndex', curIndex)
    },
    submit() {
      // 直接赋值在vue2环境下会丢失响应式
      this.$set(this.paperItem, 'submit', true)

      const findex = this.examData.findIndex((item) => item.exam_id == this.paperItem.exam_id)
      // #ifdef VUE2
      // #ifdef MP-WEIXIN
      // 在vue2环境下的微信小程序响应式会丢失，需要手动设置
      store.commit('updateDataElement', { index: findex, key: 'submit', value: true })
      // #endif
      // #endif
      const handleSubmit = {
        selected: this.paperItem.selected || [],
        correct: this.paperItem.correct || false,
        paper: this.paperItem,
        index: findex
      }
      // 跨组件通信 - 提交
      uni.$emit('e-exam-paper-item-submit', handleSubmit)
    },
    onSelect(e) {
      // 直接赋值在vue2环境下会丢失响应式
      this.$set(this.paperItem, 'selected', e.selected)
      this.$set(this.paperItem, 'correct', e.correct)
      // #ifdef VUE2
      // #ifdef MP-WEIXIN
      // 在vue2环境下的微信小程序响应式会丢失，需要手动设置
      const findex = this.examData.findIndex((item) => item.exam_id == this.paperItem.exam_id)
      store.commit('updateDataElement', { index: findex, key: 'selected', value: e.selected })
      store.commit('updateDataElement', { index: findex, key: 'correct', value: e.correct })
      // #endif
      // #endif
    },
    /**
     * 纠错反馈
     */
    onFeedback(e) {
      uni.$emit('e-exam-paper-item-feedback', e)
    },
    // 交卷
    complete() {
      uni.showModal({
        title: '交卷',
        content: '确认检查无误后交卷吗？',
        showCancel: true,
        success: ({ confirm }) => {
          if (confirm) {
            // 跨组件通信 - 交卷
            uni.$emit('e-exam-paper-complete', this.examData)
          }
        }
      })
    },
    // 监听交卷
    onCompleted() {
      // exam模式开启交卷监听
      if (this.examType == this.config.examTypeDict[2]) {
        uni.$on('e-exam-paper-complete', () => {
          // 唤醒提交
          this.submit()
        })
      }
    }
  }
}
</script>

<style lang="scss">
.swiper-scroll {
  height: 100%;
  padding-bottom: var(--card-header-height);

  .title {
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    display: flex;

    .title-index {
      line-height: 1.6;
      margin-right: 24rpx;
    }

    .title-content {
      flex: 1;

      .paper-type-tag {
        background-color: var(--primary-color);
        margin-right: var(--paper-unit-12);
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
        color: #ffffff;
        font-size: 12px;
        box-sizing: border-box;
        float: left;
        position: relative;
        top: 6rpx;
      }

      .rich-text {
        display: inline;
        line-height: 1.6;
      }
    }
  }

  .options {
    padding: var(--paper-unit-12);
    box-sizing: border-box;
  }

  .anwser {
    margin: var(--paper-unit-12);
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    background-color: var(--sub-bg-color);
    border-radius: calc(#{var(--paper-unit-12)} / 2);

    .anwser-text,
    .anwser-correct {
      font-weight: 700;
      color: var(--success-color);
      margin: 0 24rpx;
    }

    .anwser-wrong {
      font-weight: 700;
      color: var(--error-color);
      margin: 0 24rpx;
    }
  }

  .analysis {
    margin: var(--paper-unit-12);
    padding: var(--paper-unit-12);
    box-sizing: border-box;
    background-color: var(--sub-bg-color);
    border-radius: calc(#{var(--paper-unit-12)} / 2);

    .analysis-title {
      font-size: 14px;
      line-height: 1.5;
      color: var(--primary-color);

      &::before {
        content: '';
        display: inline-block;
        width: 8rpx;
        border-radius: 4rpx;
        height: var(--paper-unit-12);
        background-color: var(--primary-color);
        margin-right: calc(#{var(--paper-unit-12)} / 2);
      }
    }

    .feedback {
      font-size: 12px;
      margin-top: var(--paper-unit-12);
      opacity: 0.6;
      text-align: right;
    }
  }

  .control {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 1;

    .control-btn {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .control-placeholder {
    width: 100%;
    height: 100rpx;
  }
}
</style>
